<template>
  <div class="hm-recommend">
    <van-pull-refresh
      v-model="isLoading"
      success-text="刷新成功"
      @refresh="onRefresh"
    >
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell
          class="box"
          v-for="item in list"
          :key="item.id"
          @click="toDetails(item.id)"
        >
          <div class="box-header">
            <div class="box-header-left">
              <img :src="item.avatar" alt="" />
            </div>
            <div class="box-header-right">
              <div class="box-header-right-top">{{ item.stem }}</div>
              <div class="box-header-right-bottom">
                <span>{{ item.creator }}</span>
                <span>|</span>
                <span>{{ item.createdAt }}</span>
              </div>
            </div>
          </div>
          <div class="box-content">
            <span>{{ item.content.replace(/<[^>]*>/g, "") }}</span>
          </div>
          <div class="box-footer">
            <span>点赞 {{ item.likeCount }}</span>
            <span>|</span>
            <span>浏览 {{ item.view }}</span>
          </div>
        </van-cell>
      </van-list>

      <!-- <p>刷新次数: {{ count }}</p> -->
    </van-pull-refresh>
  </div>
</template>

<script>
import axios from "axios";
import { Toast } from "vant";
export default {
  created() {
    this.getList();
  },
  data() {
    return {
      list: [],
      current: 1,
      isLoading: false,
      loading: false,
      finished: false,
    };
  },
  methods: {
    onLoad() {
      this.current++;
      this.getList();
      this.loading = false;
      if (this.list.length >= 10) {
        this.finished = true;
      }
    },
    onRefresh() {
      setTimeout(() => {
        Toast("刷新成功");
        this.isLoading = false;
        // this.count++;
        this.getList();
      }, 1000);
    },
    toDetails(id) {
      this.$router.push(`/viewdetails/${id}`);
    },
    getList() {
      axios({
        url: `http://interview-api-t.itheima.net/h5/interview/query?current=${this.current}&pageSize=10&sorter=weight_desc`,
        method: "get",
        headers: {
          Authorization: `Bearer ${localStorage.getItem("token")}`,
        },
      })
        .then((res) => {
          this.list = res.data.data.rows;
        })
        .catch(() => {
          //跳转回登录页
          this.$router.push("/login");
          Toast("登录身份已过期，请重新登录");
        });
    },
  },
};
</script>

<style lang="less" scoped>
.hm-recommend {
  .box {
    padding: 10px;
    .box-header {
      display: flex;
      align-items: center;
      .box-header-left {
        margin-right: 10px;
        img {
          width: 30px;
          height: 30px;
          border-radius: 50%;
        }
      }
      .box-header-right {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        .box-header-right-top {
          font-size: 13px;
          color: #333;
          font-weight: 500;
        }
        .box-header-right-bottom {
          font-size: 10px;
          color: #999;
        }
        .box-header-right-bottom span:nth-child(-n + 2) {
          margin-right: 5px;
        }
      }
    }
    .box-content {
      font-size: 14px;
      color: #333;
      margin: 10px 0;
      line-height: 1.5;
      text-align: justify;
      //数据超过两行，显示省略号
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .box-footer {
      display: flex;
      align-items: center;
      font-size: 12px;
      color: #999;
      span:nth-child(-n + 2) {
        margin-right: 5px;
      }
    }
  }
}
</style>
